<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单表格与表单示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        form {
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 5px;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            margin: 5px 0 15px;
            display: block;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>简单表格与表单示例</h1>
    
    <h2>1. 简单表格</h2>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>28</td>
            <td>广州</td>
        </tr>
    </table>
    
    <h2>2. 简单表单</h2>
    <form>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" placeholder="请输入姓名">
        
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" placeholder="请输入邮箱">
        
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" min="1" max="120">
        
        <label for="gender">性别:</label>
        <select id="gender" name="gender">
            <option value="">请选择</option>
            <option value="male">男</option>
            <option value="female">女</option>
        </select>
        
        <label for="message">留言:</label>
        <textarea id="message" name="message" rows="3" placeholder="请输入留言"></textarea>
        
        <button type="submit">提交</button>
    </form>
</body>
</html>